<template>
  <div>
    <div class="top-box">
      <!-- <h1 style="color: white">系统</h1> -->
      <div class="tab-trans tab">
        <div class="button-box">
          <div class="my-button" v-for="(item, index) in state.buttonName" :key="item.value"
            :class="[state.activeIndex == index ? 'active' : '']" @click="activeDown(index)">
            {{ item.label }}
          </div>
        </div>
        <div class="chart-box">
          <PIEBarChart :options="state.option2" className="chart1"></PIEBarChart>
        </div>
      </div>
      <div class="tab-trans tab">
        <div class="button-box">
          <div class="my-button" v-for="(item, index) in state.buttonName" :key="item.value"
            :class="[state.activeIndex == index ? 'active' : '']" @click="activeDown(index)">
            {{ item.label }}
          </div>
        </div>
        <div class="chart-box">
          <PIEBarChart :options="state.option2" className="chart1"></PIEBarChart>
        </div>
      </div>
      <div class="tab-trans tab">
        <div class="button-box">
          <div class="my-button" v-for="(item, index) in state.buttonName" :key="item.value"
            :class="[state.activeIndex == index ? 'active' : '']" @click="activeDown(index)">
            {{ item.label }}
          </div>
        </div>
        <div class="chart-box">
          <PIEBarChart :options="state.option2" className="chart1"></PIEBarChart>
        </div>
      </div>
    </div>

    <div class="bottom-box">
      <PIETable :data="state.tableData1" :columns="state.fields" :mainTitle="mainTitle" class="pie-table"></PIETable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, toRefs, getCurrentInstance, ref } from "vue";
import type { TabsPaneContext } from "element-plus";

// const activeName = ref("second");
// const state = ref({
//   activeName: "second",
// });
let mainTitle = "任务规划执行状态";
const state = reactive({
  activeName: "first",
  option1: {
    title: {
      text: "今日/本周/本月转换",
      textStyle: {
        //文字颜色
        color: "#fff",
        //字体风格,'normal','italic','oblique'
        fontStyle: "normal",
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: "bold",
        //字体系列
        fontFamily: "sans-serif",
        //字体大小
        fontSize: 15,
      },
      top: 15,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "15%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLine: { show: true },
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "white", //更改坐标轴文字颜色
          fontSize: 10, //更改坐标轴文字大小
        },
      },
      name: "TB", //坐标轴单位
      // nameLocation: "start", //设置name位置  start或者end
      nameTextStyle: {
        color: "#fff",
        fontSize: 10,
        padding: 10,
      },
    },
    yAxis: {
      type: "category",
      data: ["台站元数据", "能谱", "水声", "次声", "地震"],
      axisLabel: {
        show: true,
        textStyle: {
          color: "white", //更改坐标轴文字颜色
          fontSize: 10, //更改坐标轴文字大小
        },
      },
    },
    series: [
      {
        // name: "2011",
        type: "bar",
        barWidth: 10, //设置柱状图大小
        itemStyle: {
          normal: {
            color: "#22FFCC",
          },
        },
        data: [10, 20, 30, 25, 20],
      },
    ],
  },
  option2: {
    title: {
      text: "今日/本周/本月转换",
      textStyle: {
        //文字颜色
        color: "#fff",
        //字体风格,'normal','italic','oblique'
        fontStyle: "normal",
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: "bold",
        //字体系列
        fontFamily: "sans-serif",
        //字体大小
        fontSize: 15,
      },
      top: 15,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "15%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLine: { show: true },
      boundaryGap: [0, 0.01],
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "white", //更改坐标轴文字颜色
          fontSize: 10, //更改坐标轴文字大小
        },
      },
      name: "TB", //坐标轴单位
      // nameLocation: "start", //设置name位置  start或者end
      nameTextStyle: {
        color: "#fff",
        fontSize: 10,
        padding: 10,
      },
    },
    yAxis: {
      type: "category",
      data: ["台站元数据", "能谱", "水声", "次声", "地震"],
      axisLabel: {
        show: true,
        textStyle: {
          color: "white", //更改坐标轴文字颜色
          fontSize: 10, //更改坐标轴文字大小
        },
      },
    },
    series: [
      {
        // name: "2011",
        type: "bar",
        barWidth: 10, //设置柱状图大小
        itemStyle: {
          normal: {
            color: "#FFB84E",
          },
        },
        data: [50, 20, 30, 25, 20],
      },
    ],
  },
  buttonName: [
    { value: "今日转换", label: "今日转换" },
    { value: "本周转换", label: "本周转换" },
    { value: "本月转换", label: "本月转换" },
  ], //按钮标题
  activeIndex: 0,
  tableData1: [
    {
      name: "站台实时监测能力分析",
      status: "关闭",
      load: "20%",
    },
    {
      name: "阈值监测事件预警",
      status: "关闭",
      load: "10%",
    },
    {
      name: "台站质量报告分析",
      status: "关闭",
      load: "10%",
    },
    {
      name: "台站实时监测能力分析",
      status: "关闭",
      load: "10%",
    },
    {
      name: "阈值监测事件预警",
      status: "激活",
      load: "10%",
    },
    {
      name: "台站质量报告分析",
      status: "激活",
      load: "10%",
    },
  ], //表格数据
  fields: [
    { label: "配置", prop: "name" },
    {
      label: "状态",
      prop: "status",
      isTemplate: true,
    },
    { label: "负载", prop: "load" },
    // { label: "操作", prop: "operation"}
  ], //表头
});
const activeDown = (index: any) => {
  state.activeIndex = index;
  state.option2 = state.option1; //重新渲染echart？
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="less" scoped>
.top-box {
  display: flex;
  margin: @global-margin;
  height: 40%;
  flex-direction: row; //默认值横向

  .tab {
    color: rgba(255, 255, 255, 0.89);
    position: relative;
    margin-right: @global-margin;
    flex: 1;
    background-image: radial-gradient(#010814ef, #144f79a1);
    border: 2px solid #1f4b6e;
    border-radius: 10px;

    .button-box {
      display: flex;
      margin-top: 20px;

      .my-button {
        margin-left: 20px;
      }

      .active {
        color: #fff;
        font-weight: 600;
      }
    }

    .chart-box {}
  }
}

.bottom-box {
  margin: @global-margin;
  // width: 100vw;
  height: 60%;
}
</style>